<template>
  <!-- 模板内容：只能有一个div  -->
  <div class="bigBox">
    <!-- 主页面书签 -->
    <div class="content" v-for="(item, index) in list" :key="index">
      <h2>{{ item.title }}</h2>
      <span>{{ item.author }}</span>
      <img :src="item.imgSrc" alt="" />
      <!-- <br /> -->
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import axios from "axios";
import random from "../plugins/random";
Vue.use(random);
export default {
  name: "Mark",
  data() {
    return {
      list: [],
    };
  },
  methods: {
    async fn_getDate() {
      let { data } = await axios.get("./wechatBook.json");
      console.log(data);
      let index = random(0, data.bookemark.length);
      this.list.push(data.bookemark[index]);
      console.log(index);
    },
  },
  created() {
    this.fn_getDate();
  },
};
</script>

<style scoped>
/* css样式 */
.bigBox {
  width: 100%;
}
.content {
  margin: 0.3rem;
  width: 90%;
  height: 4rem;
  position: relative;
  background: cornsilk;
  border-radius: 0.5rem;
}
.content > h2 {
  font-size: 0.18rem;
  text-align: center;
  padding-top: 1.8rem;
}
span {
  font-size: 0.3rem;
  font-weight: bold;
  display: block;
  margin-left: 4.5rem;
}
img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
  border-radius: 0.5rem;
}
</style>